<template>
  <div class="hello">
    <el-row>
      <el-col :span="22" :offset="1">
        <div class="content">
          <div class="title">
            {{ msg }}
          </div>
          <div class="seat-area">
            <ul>
              <li v-for="(item,index) in dataList" :key="index">
                <div class="seat-item" :id="item.name" v-if="item.available === 0" @click="chooseSeat(item)">{{item.name}}</div>
                <div class="seat-item unavailable" v-if="item.available === 1">{{item.name}}</div>
              </li>
            </ul>
          </div>
          <div class="order-area">
            <p>摊位：<br/><br/> <span v-for="(orderitem,index) in orderList" :key="index">{{orderitem.name}}</span></p>
            <p>摊位数：{{total}} 个</p>
            <p>总价：{{sum}} 元</p>
            <el-button type="primary" @click="submitOrder" class="btn">确认提交</el-button>
          </div>
        </div>

        <DatePicker :authority="authority" @returnData="getData"></DatePicker>

        <div class="orderdetail">
          <p><span style="font-size:1.5em">确认订单信息</span><span style="float:right;">订单号：123455676896094578732</span></p>
          <div class="order-box">
            <div class="order-content" v-for="(confirm,index) in orderList" :key="index">
              <p>序号：{{index + 1}}</p>
              <p>摊位名：{{confirm.name}}</p>
              <p>选择使用时间：
                <el-date-picker placeholder="选择日期" type="date" v-model="time"></el-date-picker>
              </p>
            </div>
          </div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
  import DatePicker from '@/components/common/DatePicker'

  export default {
    name: 'hello',
    data () {
      return {
        msg: '招聘摊位',
        total: 0,
        sum: 0,
        time: '',
        orderList: [],
        dataList: [{
          id: '1',
          url: '',
          name: '摊位1',
          price: 200,
          available: 0,
          isOrder: false
        }, {
          id: '2',
          url: '',
          name: '摊位2',
          price: 200,
          available: 0,
          isOrder: false
        }, {
          id: '3',
          url: '',
          name: '摊位3',
          price: 200,
          available: 0,
          isOrder: false
        }, {
          id: '4',
          url: '',
          name: '摊位4',
          price: 200,
          available: 1,
          isOrder: false
        }, {
          id: '5',
          url: '',
          name: '摊位5',
          price: 200,
          available: 0,
          isOrder: false
        }, {
          id: '6',
          url: '',
          name: '摊位6',
          price: 200,
          available: 1,
          isOrder: false
        }, {
          id: '7',
          url: '',
          name: '摊位7',
          price: 200,
          available: 0,
          isOrder: false
        }, {
          id: '8',
          url: '',
          name: '摊位8',
          price: 200,
          available: 0,
          isOrder: false
        }, {
          id: '9',
          url: '',
          name: '摊位9',
          price: 200,
          available: 0,
          isOrder: false
        }, {
          id: '10',
          url: '',
          name: '摊位10',
          price: 200,
          available: 0,
          isOrder: false
        }],
        authority: {
          type: 'date',
          label1: '开始时间',
          label2: '结束时间',
          filed1: 'schedule_date',
          filed2: 'schedule_end_date'
        }
      }
    },
    created () {

    },
    methods: {
      chooseSeat (data) {
        if (data.isOrder === false) {
          this.total++
          this.sum += data.price
          data.isOrder = true
          this.orderList.push(data)
          document.getElementById(data.name).className = 'choosed'
        } else if (data.isOrder === true) {
          this.total--
          this.sum -= data.price
          data.isOrder = false
          let index = this.orderList.indexOf(data)
          if (index > -1) {
            this.orderList.splice(index, 1)
          }
          document.getElementById(data.name).className = 'seat-item'
        }
      },
      submitOrder () {

      },
      getData (state) {
        console.log(state)
      }
    },
    components: {
      DatePicker
    }
  }
</script>

<style scoped>
  .content {
    text-align: center;
    padding: 1em;
    margin: 2em auto;
    border: 1px solid #999;
    height: 500px;
  }

  .title {
    font-size: 1.5em;
    padding: 0.5em;
    margin-bottom: 1em;
    border-bottom: 1px solid #DADADA;
  }

  .seat-area {
    width: 70%;
    float: left;
    height: 350px;
    margin: 1em 2em;
    text-align: center;
    border-right: 1px dotted #DADADA;
  }

  .seat-area li {
    list-style: none;
    float: left;
  }

  .seat-item {
    margin: 0.5em;
    padding: 0.5em;
    border: 1px solid #000;
    background: #E3FBE3;
    cursor: pointer;
  }

  .unavailable {
    background: #DADADA;
    cursor: not-allowed;
  }

  .choosed {
    margin: 0.5em;
    padding: 0.5em;
    border: 1px solid #000;
    background-color: #E0572A;
  }

  .order-area {
    width: 23%;
    float: right;
    height: 350px;
  }

  .order-area p {
    margin: 1em 0em;
    text-align: left;
  }

  .order-area span {
    padding: 0.3em 0.5em;
    /*border-right: 1px solid #e8e8e8;*/
  }

  .btn {
    margin: 2em auto;
  }

  .order-box {
    border: 1px solid #e8e8e8;
    border-bottom: none;
    margin: 0.5em 0em 5em;
  }

  .order-content {
    border-bottom: 1px solid #e8e8e8;
    padding: 1em 5em;
  }
</style>
